<template>
  <el-dialog
    title="题目预览"
    :visible="showPreviewDialog"
    center
    @close="btnCancle"
    ref="questionDetail"
  >
    <el-row
      type="flex"
      class="previewOne"
    >
      <el-col :span="6">【题型】
        :{{FormatQuestionType(QuestionInfoList.questionType)}}</el-col>
      <el-col :span="6">【编号】 :{{QuestionInfoList.id}}</el-col>
      <el-col :span="6">【难度】 :{{FormatDifficulty(QuestionInfoList.difficulty)}}
      </el-col>
      <el-col :span="6">【标签】 :{{QuestionInfoList.tags}}</el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="6">【学科】 :{{QuestionInfoList.subjectName}}</el-col>
      <el-col :span="6">【目录】 :{{QuestionInfoList.catalogID}}</el-col>
      <el-col :span="6">【方向】 :{{QuestionInfoList.direction}}</el-col>
    </el-row>
    <!-- *************************** -->
    <hr />
    <el-row class="previewOne">
      <el-col>【题干】</el-col>
      <el-col class="question">
        {{QuestionInfoList.question}}
      </el-col>
    </el-row>
    <el-row>
      <el-col class="previewOne">
        单选题 选项：(以下选中的选项为正确答案)
      </el-col>
    </el-row>
    <el-row class="previewOne">

      <el-radio
        v-for="(radioItem,index) in this.QuestionInfoList.options"
        :key="index"
        :v-model="isRadio"
        :label="radioItem.isRight = 1 ? 1 : ''"
        style="display:block;margin:10px 0"
      >{{radioItem.title}}</el-radio>
    </el-row>
    <hr />
    <el-row>
      <el-col>
        <span>【参考答案】:</span>
        <el-button
          type="danger"
          @click="showMedia = true"
        >视频答案预览</el-button>
      </el-col>
      <!-- 【视频组件】 -->
      <el-col>
        <Media
          v-if="showMedia"
          :src="[QuestionInfoList.videoURL]"
          :kind="'video'"
          :isMuted="(false)"
          :autoplay="false"
          :controls="true"
          :loop="true"
          :ref="'fish'"
          :style="{width: '500px',height:'300px'}"
          @pause="handle()"
        >
        </Media>
      </el-col>
    </el-row>
    <hr />
    <el-row class="previewOne">
      <el-col>【答案解析】 : {{QuestionInfoList.answer}} </el-col>
    </el-row>
    <hr />
    <el-row class="previewOne">
      <el-col>【题目备注】 : {{QuestionInfoList.remarks}}</el-col>
    </el-row>
    <span slot="footer">
      <el-row
        type="flex"
        justify="end"
      >
        <el-button
          @click="btnCancle"
          type="primary"
        >取 消</el-button>
      </el-row>
    </span>

  </el-dialog>
</template>

<script>
// detail,
import { detail } from '@/api/hmmm/questions'
import { questionType, difficulty, chkType, publishType } from '@/api/hmmm/constants.js'

import Media from '@dongido/vue-viaudio'
export default {
  // 组件名称
  name: 'questionPreview',
  components: { Media },
  props: {
    showPreviewDialog: {
      type: Boolean,
      default: false
    },
    // 所要预览的题目的id
    preSubjectId: {
      type: [String, Number],
      default: null
    }
  },
  // 组件状态值
  data () {
    return {
      isRadio: '1',
      QuestionInfoList: [],
      questionType: questionType,
      // 试题难度
      difficulty: difficulty,
      // 审核状态
      chkType: chkType,
      // 发布状态
      publishType: publishType,
      showMedia: false
    }
  },
  // 计算属性
  computed: {},

  methods: {
    btnCancle () {
      this.$emit('update:showPreviewDialog', false)
      this.showMedia = false
    },
    // 获取详细信息
    async getQuestionInfo (id) {
      // 【id传进来了】
      // debugger
      const { data } = await detail({ id })
      // debugger
      this.QuestionInfoList = data
      // console.log(this.QuestionInfoList)
      console.log(data.options)
      // [options]
    },
    // 格式化题型
    FormatQuestionType (value) {
      const obj = this.questionType.find(item => item.value.toString() === value)
      return obj ? obj.label : '未知'
    },
    // 格式化难度
    FormatDifficulty (value) {
      const obj = this.difficulty.find(item => item.value.toString() === value)
      return obj ? obj.label : '未知'
    },
    // 选项的问题
    // 播放视频的问题
    handle () {
      setTimeout(() => {
        this.$refs.fish.play()
      }, 2000)
    }
  }
}
</script>

<style scoped lang="scss">
.previewOne {
  line-height: 50px;
  .question {
    color: blue;
    line-height: 30px;
  }
}
</style>
